<!DOCTYPE html>
<html lang="en">
{%load static%}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href={%static "css/web.css"%}>
    <link rel="stylesheet" href={%static "plugins/iconfont/iconfont.css"%}>
    <script src={%static "plugins/iconfont/iconfont.js"%}></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>MUCmaekrt.order</title>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="menu">
        <div class="logo">
            <a href="/index/"><img src="/static/img/参考magazine-unlock-05-2.3.8792-529240D9E5BFBECB08C7D.jpg"
                    alt="logo"></a>
        </div>
        <ul class="menu-section">
            <li class="combobox" id="campusbox">
                <div class="box-title">
                    <i class="iconfont icon-dizhibu"></i>
                    <span>校区</span>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-3">
                    <li class="category">
                        <a class="link" href="/hcampus/">
                            <i class="iconfonts icon-hd"></i>
                            <span>海淀校区</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="/fcampus/">
                            <i class="iconfonts icon-ft"></i>
                            <spab>丰台校区</spab>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="#">
                            <i class="iconfonts icon-hn"></i>
                            <span>海南校区</span>
                        </a>
                    </li>
                </ul>

            </li>
        </ul>
        <ul class="menu-section grow">
            <li id="sort" class="combobox">
                <div class="box-title">
                    <i class="iconfont icon-hudonggongju"></i>
                    <span>商品分类</span>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-4">
                    <li class="category">
                        <a class="link" href="" target=" ">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>全部商品</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="" target=" ">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>最近商品</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="" target=" ">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>热卖商品</span>
                        </a>
                    </li>
                </ul>

            </li>
            <li class="sepearator"></li>
            <li id="my-profile" class="category">
                <a href="/order/" target="" class="link">
                    <i class="iconfont icon-user"></i>
                    <div class="title-nav">
                        <span>个人订单</span>
                    </div>
                </a>
            </li>
            <li id="message" class="category">
                <a href="" target=" " class="link">
                    <i class="iconfont icon-gerenyouxiang_cebianlan_shoujianxiang"></i>
                    <div class="title-nav">
                        <span>我的消息</span>
                    </div>
                </a>
            </li>
            <li id="user" class="combobox">
                <div class="box-title">
                    <img src="/media/{{user.Avatr}}" alt="user" class="user-avatar">
                    <div class="uesr-and-status">
                        <span class="user-name">
                            {{user.Name}}

                        </span>
                        <div class="user-status">
                            <span class="in-school">在校</span>
                        </div>
                    </div>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-5">
                    <li class="combobox-text">
                        <span>选择你的状态</span>
                    </li>
                    <li class="status-switch">
                        <span class="in-school">在校</span>
                        <span class="out-school">离校</span>
                        <span class="busy">勿扰</span>
                    </li>
                    <li class="category">
                        <a href="/personalinfo/" class="link">
                            <i class="iconfont icon-gear-settings"></i>
                            <div class="title-nav">
                                <span>设置</span>
                            </div>
                        </a>
                    </li>
                    <li class="category">
                        <a href="/vlogout/" class="link">
                            <i class="iconfont icon-tuichu"></i>
                            <div class="title-nav">
                                <span>退出</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

    <!-- 头图片 -->
    <div class="header-body-order"></div>
    <section class="content">
        <div class="content_header">
            <div class="container">
                <div class="order-container">
                    <div class="order-search">
                        <p>搜索</p>
                        <input type="text" placeholder="请输入商品名称" class="keyword">
                        <div class="seaech_helper_person"></div>
                    </div>
                    <div class="price-filter">
                        <div>
                            <h5>Max Price</h5>
                            <input type="number" max="9999" min="1" placeholder="MAX" size="5" value>
                            <h5>¥</h5>
                        </div>
                        <div>
                            <h5>Min Price</h5>
                            <input type="number" max="9999" min="0" placeholder="0" size="5" value>
                            <h5>¥</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section class="content-body">
            <div class="orders-section container">
                <div class="order-type-box">
                    <div class="order-type_own">
                        <span>Want to Sell</span>
                        <div class="orderbtn_box">
                            <button class="visible-btn">全部可见</button>
                            <button class="invisible-btn">全部隐藏</button>
                        </div>
                    </div>
                    <div class="order-type_own">
                        <span>Want to Buy</span>
                        <div class="orderbtn_box">
                            <button class="visible-btn">全部可见</button>
                            <button class="invisible-btn">全部隐藏</button>
                        </div>
                    </div>
                </div>
                <div class="orders">
                    <div class="listening-sell_own" style="grid-template-rows: 150px 150px 150px;"><!--sell-->
                        {% for i in good %}
                        {% if i.goodtype == 'sell'  %}
                        <form action="" method="post" id='buyform'>
                            {% csrf_token %}
                        <div class="item_own">  
                        <img src="/media/{{i.image}}">  
                        <p class="name" style="width: 200px;">{{i.name}}</p>  
                        <p class="spec" style="width: 100px;">{{i.describe}}</p>  
                        <p class="price">{{i.price}}</p>  
                        <p class="count">x{{i.countnum}}</p>  
                        <div class="obtn_box">  
                           
                                <input type="hidden" name='id' value={{i.id}}>
                            <button id="bought_btn" class="bs_btn"  data-action="/sold/" type="button">
                                <i class="iconfont icon-check"></i>
                                sold
                            </button>
                            <button class="edit_btn" data-action="/edit/" type='button'>
                                <i class="iconfont icon-edit" ></i>
                                edit
                            </button>
                            <button class="add_btn" data-action="/addgood1/" type="button">
                                +1
                            </button>
                            <button class="visible_btn" data-action="/changevis/" type="button">
                                {% if i.goodstatus == 'visible'%}
                                <i class="iconfont icon-kejian"></i>
                                visible
                                {% else %}
                                <i class="iconfont icon-bukejian"></i>
                                invisible
                                {% endif %}
                                </button>
                            <button class="remove_btn" data-action="/delgoods/" type="button" >
                                <i class="iconfont icon-delete-02"></i>
                            </button>
                        </div>
                        </div> 
                        </form>
                        {% endif %}
                      {% endfor %}
                      </div>
                    <div class="listening-buy_own" style="grid-template-rows: 150px 150px 150px;"><!--buy-->
                        {% for i in good %}
                        {% if i.goodtype == 'buy'  %}
                        <form action="" method="post" id='buyform'>
                            {% csrf_token %}
                        <div class="item_own">  
                        <img src="/media/{{i.image}}">  
                        <p class="name" style="width: 200px;">{{i.name}}</p>  
                        <p class="spec" style="width: 100px;">{{i.describe}}</p>  
                        <p class="price">{{i.price}}</p>  
                        <p class="count">x{{i.countnum}}</p>  
                        <div class="obtn_box">  
                           
                                <input type="hidden" name='id' value={{i.id}}>
                            <button id="bought_btn" class="bs_btn"  data-action="/sold/" type="button">
                                <i class="iconfont icon-check"></i>
                                bought
                            </button>
                            <button class="edit_btn" data-action="/edit/" type='button'>
                                <i class="iconfont icon-edit" ></i>
                                edit
                            </button>
                            <button class="add_btn" data-action="/addgood1/" type="button">
                                +1
                            </button>
                            <button class="visible_btn" data-action="/changevis/" type="button">
                                {% if i.goodstatus == 'visible'%}
                                <i class="iconfont icon-kejian"></i>
                                visible
                                {% else %}
                                <i class="iconfont icon-bukejian"></i>
                                invisible
                                {% endif %}
                                </button>
                            <button class="remove_btn" data-action="/delgoods/" type="button" >
                                <i class="iconfont icon-delete-02"></i>
                                
                            </button>
                        </div>  
                        </div>  
                        </form>
                        {% endif %}
                      {% endfor %}
                    </div>
                </div>
            </div>
        </section>
    </section>

    <!--订单提交 -->
    <div class="submit_btn">
        <div class="submit_btn_add">
            +
        </div>
        <span class="submit_btn_text">编辑订单</span>
    </div>
    <!-- 提交表单 -->
    <div class="overlay">
        <div class="submit_form" style="border: 1px solid black;">
            <form method="POST" {% if type == 'block' %}action="/changegoods/"{% else %}action="/addgoods/"{% endif %}  enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name='id' value={{ed.id}}>
                <table>
                    <tr height="55px">
                        <td rowspan="6" width="225px" height="200px" align="center" style="background-color: rgb(64, 46, 46);">
                            {% if ed %}<img id="img_box" src="/media/{{ed.image}}">{% else %}
                            <img id="img_box">{% endif %}
                        </td>
                        <td colspan="3" style="width: 400px; height: 48px; background-color: white;display: flex;">
                            <div class="submit_title" background-color="white">
                                提交订单
                            </div>
                            <div class="close_btn">
                                关闭
                            </div>
                        </td>

                    </tr>
                    <tr height="16px">
                        <td colspan="3" style="width: 400px;height: 16px;display: flex;">
                            <div style="margin-left: 5px;">订单类型</div>
                            <div style="margin-left: 140px;">订单状态</div>
                        </td>
                    </tr>
                    <tr height="30px">
                        <td colspan="3" style="display: flex">
                            <div class="order-type_box_submit">
                                <input type="radio" name="sellOrbuy" value="sell" {% if ed.goodtype == "sell" %}checked{% endif %}><span class="bs_box_s">Want to
                                    Sell</span>
                                <input type="radio" name="sellOrbuy" value="buy" style="margin-left: 10px;" {% if ed.goodtype == "buy" %}checked{% endif %}><span
                                    class="bs_box_b">Want to Buy</span>
                            </div>
                            <div class="order-visible_box_submit">
                                <input type="radio" name="visible" value="visible" {% if ed.goodstatus == "visible" %}checked{% endif %}>
                                <span class="bs_box_s">
                                    <i class="iconfont icon-yanjing"></i>
                                    Visible
                                </span>
                                <input type="radio" name="visible" value="invisible" style="margin-left: 10px;" {% if ed.goodtype == "invisible" %}checked{% endif %}>
                                <span class="bs_box_b">
                                    <i class="iconfont icon-biyan"></i>
                                    invisible
                                </span>
                            </div>
                        </td>
                    </tr>
                    <tr height="44px">
                        <td colspan="3" style="margin-left: 5px;">
                            <p>商品名称</p>
                            <input type="text" id="item-name" name="item-name" placeholder="ItemName" {% if ed %}value="{{ed.name}}"{% endif %}
                                style="width: 80%;height: 28px;border-radius: 3px;">
                        </td>
                    </tr>
                    <tr height="24px">
                        <td colspan="3" style="display: flex;">
                            <div style="margin-right: 100px;">价格/个</div>
                            <div>数量</div>
                        </td> 
                    </tr>
                    <tr>
                        <td colspan="3" style="display: flex;">
                       
                            <input type="text" id="price" name="price" placeholder="Price" {% if ed %}value="{{ed.price}}"{% endif %}
                                style="width: 35%;height: 28px;border-radius: 3px;">
                            <input type="text" id="price" name="count" placeholder="Count" {% if ed %}value="{{ed.countnum}}"{% endif %}
                                style="width: 35%;height: 28px;border-radius: 3px; margin-left: 15px;">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <hr>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                       <input type="file" name="item_upload" id="item_upload">
 
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="background-color: rgb(56, 13, 13);color: azure;">
                            <div class="spec">
                                
                                描述:<input type="text" id="spec" placeholder="size" name='description' {% if ed %}value="{{ed.describe}}"{% endif %}>
                            </div>
                           
                        </td>
                        <td>
                            <button type="submit" class="order_submit_btn">
                                提交
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <script src={%static "js/web.js"%}></script>
    <script> //上传订单图片
       var x="{{type}}"
        if(x){
            document.querySelector('.submit_form').style.display = 'block';      
        }
        
var forms = document.querySelectorAll('form'); // 获取所有表单元素  
forms.forEach(function(form) {  
    var buttons = form.querySelectorAll('button'); // 获取表单中的所有按钮元素  
    buttons.forEach(function(button) {  
        button.onclick = function() {  
            var action = button.dataset.action; // 获取按钮的data-action属性值  
            if (action === '/delgoods/') {  
                form.action='/delgoods/';
                form.submit();
                // 执行操作1的逻辑  
            } else if (action === '/addgood1/') {  
                form.action='/addgood1/';
                form.submit();
                // 执行操作2的逻辑  
            } else if (action === '/changevis/') {  
                form.action='/changevis/';
                form.submit();
                // 执行操作3的逻辑  
            }  
            else if (action === '/sold/') {  
                form.action='/sold/';
                form.submit();
                // 执行操作3的逻辑  
            }  
            else if(action === '/edit/'){
                form.action='/edit/';
                form.submit();
            }
        };  
    });  
});  

  
    
    document.getElementById('item_upload').addEventListener('change', function () {
         var file = this.files[0];
         var reader = new FileReader();
         reader.onload = function (e) {
             document.getElementById('img_box').src = e.target.result;
         }
         reader.readAsDataURL(file);
     }); 

     //显示订单编辑
     document.querySelector('.submit_btn').addEventListener('click', function () {
         document.querySelector('.submit_form').style.display = 'block'; //   
     });
     //关闭订单编辑
     document.querySelector('.close_btn').addEventListener('click', function () {
         document.querySelector('.submit_form').style.display = 'none'; //   
     });</script>
     </body>